import React, { useState, useEffect } from "react";
import { captcha } from "../../http/userApi";
import { Form, Input, Button, message, Image } from "antd";
import { useDispatch } from "react-redux";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import "./index.scss";
import { loginAsyncAction } from "../../store/userStore/action";

const Login = (props) => {
  const dispatch = useDispatch();
  const [form] = Form.useForm();
  const [avaHeight, setAvaHeight] = useState(0);
  const [captchadata, setCaptcha] = useState("error");

  const moke = {
    code: 200,
    msg: "查询成功",
    data: [
      {
        component: "1",
        icon: "DesktopOutlined",
        menuId: 1,
        menuName: "系统首页",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "SettingOutlined",
        menuId: 2,
        menuName: "系统管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/AuthorityManagement/UserManagement",
        icon: "PayCircleOutlined",
        menuId: 3,
        menuName: "用户管理",
        pageUrl: "/home/SystemManagement/AuthorityManagement/UserManagement",
        pId: 9,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/AuthorityManagement/RoleManagement",
        icon: "PayCircleOutlined",
        menuId: 4,
        menuName: "角色管理",
        pageUrl: "/home/SystemManagement/AuthorityManagement/RoleManagement",
        pId: 9,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/AuthorityManagement/MenuManagement",
        icon: "PayCircleOutlined",
        menuId: 5,
        menuName: "菜单管理",
        pageUrl: "/home/SystemManagement/AuthorityManagement/MenuManagement",
        pId: 9,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/AuthorityManagement/DepartmentManagement",
        icon: "PayCircleOutlined",
        menuId: 6,
        menuName: "部门管理",
        pageUrl:
          "/home/SystemManagement/AuthorityManagement/DepartmentManagement",
        pId: 9,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/AuthorityManagement/DictionaryManagement",
        icon: "PayCircleOutlined",
        menuId: 7,
        menuName: "字典管理",
        pageUrl:
          "/home/SystemManagement/AuthorityManagement/DictionaryManagement",
        pId: 9,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/AuthorityManagement/BehaviorLog",
        icon: "PayCircleOutlined",
        menuId: 8,
        menuName: "行为日志",
        pageUrl: "/home/SystemManagement/AuthorityManagement/BehaviorLog",
        pId: 9,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 9,
        menuName: "权限管理",
        pageUrl: "1",
        pId: 2,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 10,
        menuName: "金融产品管理",
        pageUrl: "1",
        pId: 2,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/ProductMproduct/ProductList",
        icon: "PayCircleOutlined",
        menuId: 11,
        menuName: "产品列表",
        pageUrl: "/home/SystemManagement/ProductMproduct/ProductList",
        pId: 10,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/ProductMproduct/ProductLog",
        icon: "PayCircleOutlined",
        menuId: 12,
        menuName: "产品日志",
        pageUrl: "/home/SystemManagement/ProductMproduct/ProductLog",
        pId: 10,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "SystemManagement/ProductMproduct/ProductAudit",
        icon: "PayCircleOutlined",
        menuId: 13,
        menuName: "产品审核",
        pageUrl: "/home/SystemManagement/ProductMproduct/ProductAudit",
        pId: 10,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "TransactionOutlined",
        menuId: 14,
        menuName: "财务管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 15,
        menuName: "银行账户管理",
        pageUrl: "1",
        pId: 14,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 16,
        menuName: "财务款项台账",
        pageUrl: "1",
        pId: 14,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/BankManagement",
        icon: "PayCircleOutlined",
        menuId: 17,
        menuName: "银行账户管理",
        pageUrl: "/home/FinancialManagement/BankManagement",
        pId: 15,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/BankFlowEntry",
        icon: "PayCircleOutlined",
        menuId: 18,
        menuName: "银行流水录入",
        pageUrl: "/home/FinancialManagement/BankFlowEntry",
        pId: 15,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/CashFlowFntry",
        icon: "PayCircleOutlined",
        menuId: 19,
        menuName: "现金流水录入",
        pageUrl: "/home/FinancialManagement/CashFlowFntry",
        pId: 15,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/LendingAccount",
        icon: "PayCircleOutlined",
        menuId: 20,
        menuName: "本金放款台账",
        pageUrl: "/home/FinancialManagement/LendingAccount",
        pId: 16,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/CollectionAccount",
        icon: "PayCircleOutlined",
        menuId: 21,
        menuName: "本金收款台账",
        pageUrl: "/home/FinancialManagement/CollectionAccount",
        pId: 16,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/InterestAccount",
        icon: "PayCircleOutlined",
        menuId: 22,
        menuName: "利息收款台账",
        pageUrl: "/home/FinancialManagement/InterestAccount",
        pId: 16,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/ManagementAccount",
        icon: "PayCircleOutlined",
        menuId: 23,
        menuName: "管理费台账",
        pageUrl: "/home/FinancialManagement/ManagementAccount",
        pId: 16,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/ServiceAccount",
        icon: "PayCircleOutlined",
        menuId: 24,
        menuName: "服务费台账",
        pageUrl: "/home/FinancialManagement/ServiceAccount",
        pId: 16,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/Reconciliation",
        icon: "PayCircleOutlined",
        menuId: 25,
        menuName: "本息收支对账日志",
        pageUrl: "/home/FinancialManagement/Reconciliation",
        pId: 16,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "FinancialManagement/Expense",
        icon: "PayCircleOutlined",
        menuId: 26,
        menuName: "费用收支对账日志",
        pageUrl: "/home/FinancialManagement/Expense",
        pId: 16,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "ProjectOutlined",
        menuId: 27,
        menuName: "统计报表",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 28,
        menuName: "运营分析",
        pageUrl: "1",
        pId: 27,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 29,
        menuName: "财务收益",
        pageUrl: "1",
        pId: 27,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/CustomerAnalysis",
        icon: "PayCircleOutlined",
        menuId: 30,
        menuName: "客户分析",
        pageUrl: "/home/StatisticalReport/OperationalAnalysis/CustomerAnalysis",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/OrderAnalysis",
        icon: "PayCircleOutlined",
        menuId: 31,
        menuName: "订单分析",
        pageUrl: "/home/StatisticalReport/OperationalAnalysis/OrderAnalysis",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component:
          "StatisticalReport/OperationalAnalysis/TransactionStatistics",
        icon: "PayCircleOutlined",
        menuId: 32,
        menuName: "交易统计",
        pageUrl:
          "/home/StatisticalReport/OperationalAnalysis/TransactionStatistics",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/CommodityStatistics",
        icon: "PayCircleOutlined",
        menuId: 33,
        menuName: "商品统计",
        pageUrl:
          "/home/StatisticalReport/OperationalAnalysis/CommodityStatistics",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/FundStatistics",
        icon: "PayCircleOutlined",
        menuId: 34,
        menuName: "资金统计",
        pageUrl: "/home/StatisticalReport/OperationalAnalysis/FundStatistics",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/DataMonitoring",
        icon: "PayCircleOutlined",
        menuId: 35,
        menuName: "数据监控",
        pageUrl: "/home/StatisticalReport/OperationalAnalysis/DataMonitoring",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/AppliedStatistics",
        icon: "PayCircleOutlined",
        menuId: 36,
        menuName: "应用统计",
        pageUrl:
          "/home/StatisticalReport/OperationalAnalysis/AppliedStatistics",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/EquipmentMonitoring",
        icon: "PayCircleOutlined",
        menuId: 37,
        menuName: "设备监控",
        pageUrl:
          "/home/StatisticalReport/OperationalAnalysis/EquipmentMonitoring",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/ContentStatistics",
        icon: "PayCircleOutlined",
        menuId: 38,
        menuName: "内容统计",
        pageUrl:
          "/home/StatisticalReport/OperationalAnalysis/ContentStatistics",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/OperationalAnalysis/FlowStatistics",
        icon: "PayCircleOutlined",
        menuId: 39,
        menuName: "流量统计",
        pageUrl: "/home/StatisticalReport/OperationalAnalysis/FlowStatistics",
        pId: 28,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/FinancialIncome/CapitalFlowAnalysis",
        icon: "PayCircleOutlined",
        menuId: 40,
        menuName: "资金流分析",
        pageUrl: "/home/StatisticalReport/FinancialIncome/CapitalFlowAnalysis",
        pId: 29,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "StatisticalReport/FinancialIncome/IncomeAnalysis",
        icon: "PayCircleOutlined",
        menuId: 41,
        menuName: "收益分析",
        pageUrl: "/home/StatisticalReport/FinancialIncome/IncomeAnalysis",
        pId: 29,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "ReconciliationOutlined",
        menuId: 42,
        menuName: "贷后管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "PostLoanManagement/RepaymentReminder",
        icon: "PayCircleOutlined",
        menuId: 43,
        menuName: "正常还款提醒",
        pageUrl: "/home/PostLoanManagement/RepaymentReminder",
        pId: 42,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "PostLoanManagement/PrepaymentApplication",
        icon: "PayCircleOutlined",
        menuId: 44,
        menuName: "提前还款",
        pageUrl: "/home/PostLoanManagement/PrepaymentApplication",
        pId: 42,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "PostLoanManagement/RepaymentDetail",
        icon: "PayCircleOutlined",
        menuId: 45,
        menuName: "还款明细",
        pageUrl: "/home/PostLoanManagement/RepaymentDetail",
        pId: 42,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "PostLoanManagement/OverdueCollection",
        icon: "PayCircleOutlined",
        menuId: 46,
        menuName: "逾期催收",
        pageUrl: "/home/PostLoanManagement/OverdueCollection",
        pId: 42,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "PostLoanManagement/PenaltyInterestReduction",
        icon: "PayCircleOutlined",
        menuId: 47,
        menuName: "罚息减免",
        pageUrl: "/home/PostLoanManagement/PenaltyInterestReduction",
        pId: 42,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "PostLoanManagement/OverdueDetail",
        icon: "PayCircleOutlined",
        menuId: 48,
        menuName: "逾期明细",
        pageUrl: "/home/PostLoanManagement/OverdueDetail",
        pId: 42,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "SolutionOutlined",
        menuId: 49,
        menuName: "合同管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "ContractManagement/Contractlist",
        icon: "PayCircleOutlined",
        menuId: 50,
        menuName: "合同列表",
        pageUrl: "/home/ContractManagement/Contractlist",
        pId: 49,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "ContractManagement/ContractDetails",
        icon: "PayCircleOutlined",
        menuId: 51,
        menuName: "合同详情",
        pageUrl: "/home/ContractManagement/ContractDetails",
        pId: 49,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PieChartOutlined",
        menuId: 52,
        menuName: "风控管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 53,
        menuName: "风控引擎",
        pageUrl: "1",
        pId: 52,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 54,
        menuName: "三方认证",
        pageUrl: "1",
        pId: 52,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 55,
        menuName: "其他编辑器",
        pageUrl: "1",
        pId: 52,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "RcManagement/RcEngine/RcArule",
        icon: "PayCircleOutlined",
        menuId: 56,
        menuName: "准入规则引擎",
        pageUrl: "/home/RcManagement/RcEngine/RcArule",
        pId: 53,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "RcManagement/RcEngine/RcFraud",
        icon: "PayCircleOutlined",
        menuId: 57,
        menuName: "反欺诈引擎",
        pageUrl: "/home/RcManagement/RcEngine/RcFraud",
        pId: 53,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "RcManagement/RcCertification/RcParameter",
        icon: "PayCircleOutlined",
        menuId: 58,
        menuName: "三方参数配置",
        pageUrl: "/home/RcManagement/RcCertification/RcParameter",
        pId: 54,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "RcManagement/RcOtherEditors/RcApplication",
        icon: "PayCircleOutlined",
        menuId: 59,
        menuName: "申请资料配置",
        pageUrl: "/home/RcManagement/RcOtherEditors/RcApplication",
        pId: 55,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "RcManagement/RcOtherEditors/RcCore",
        icon: "PayCircleOutlined",
        menuId: 60,
        menuName: "电核项配置",
        pageUrl: "/home/RcManagement/RcOtherEditors/RcCore",
        pId: 55,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "FundProjectionScreenOutlined",
        menuId: 61,
        menuName: "风控审核",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "RiskControlAudit/AuditTask",
        icon: "PayCircleOutlined",
        menuId: 62,
        menuName: "审核任务处理",
        pageUrl: "/home/RiskControlAudit/AuditTask",
        pId: 61,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "RiskControlAudit/RefundDeposit",
        icon: "PayCircleOutlined",
        menuId: 63,
        menuName: "保证金退还",
        pageUrl: "/home/RiskControlAudit/RefundDeposit",
        pId: 61,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "PayCircleOutlined",
        menuId: 64,
        menuName: "运营管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "OperationManagement/HomePage",
        icon: "PayCircleOutlined",
        menuId: 65,
        menuName: "运营首页",
        pageUrl: "/home/OperationManagement/HomePage",
        pId: 64,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "OperationManagement/HelpManage",
        icon: "PayCircleOutlined",
        menuId: 66,
        menuName: "帮助管理",
        pageUrl: "/home/OperationManagement/HelpManage",
        pId: 64,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "OperationManagement/InvitationManagement",
        icon: "PayCircleOutlined",
        menuId: 67,
        menuName: "邀请管理",
        pageUrl: "/home/OperationManagement/InvitationManagement",
        pId: 64,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "OperationManagement/AdvertisingManagement",
        icon: "PayCircleOutlined",
        menuId: 68,
        menuName: "广告管理",
        pageUrl: "/home/OperationManagement/AdvertisingManagement",
        pId: 64,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "OperationManagement/CouponManagement",
        icon: "PayCircleOutlined",
        menuId: 69,
        menuName: "优惠券管理",
        pageUrl: "/home/OperationManagement/CouponManagement",
        pId: 64,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "SelectOutlined",
        menuId: 70,
        menuName: "渠道管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "ChannelsManagement",
        icon: "PayCircleOutlined",
        menuId: 71,
        menuName: "渠道管理",
        pageUrl: "/home/ChannelsManagement",
        pId: 70,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "1",
        icon: "IdcardOutlined",
        menuId: 72,
        menuName: "用户管理",
        pageUrl: "1",
        pId: 0,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "UserManagement/UserList",
        icon: "PayCircleOutlined",
        menuId: 73,
        menuName: "用户列表",
        pageUrl: "/home/UserManagement/UserList",
        pId: 72,
        isExact: 0,
        isShow: 1,
      },
      {
        component: "System/SystemPage",
        icon: "PayCircleOutlined",
        menuId: 74,
        menuName: "系统首页",
        pageUrl: "/home/System/SystemPage",
        pId: 1,
        isExact: 1,
        isShow: 1,
      },
      {
        component: "System/LendingMap",
        icon: "PayCircleOutlined",
        menuId: 75,
        menuName: "放款地图",
        pageUrl: "/home/System/LendingMap",
        pId: 1,
        isExact: 0,
        isShow: 1,
      },
    ],
    isLogin: "true",
    rolename: "超级管理员",
    token:
      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NDA4NjA4NjgsInVzZXJuYW1lIjoiYWRtaW4ifQ.fizb8sPcB9Y-lsSP7vrd_IFdF111b5SK3Vd0y7zd3gU",
  };
  //获取验证码
  useEffect(() => {
    captcha(1)
      .then((res) => {
        setCaptcha(String(res.data.data.image));
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const changecode = () => {
    captcha(1)
      .then((res) => {
        setCaptcha(String(res.data.data.image));
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //登录
  const onFinish = (values) => {
    const code = values.yzcode.toLowerCase()
    dispatch(
      loginAsyncAction({
        account: values.username,
        password: values.password,
        vscode: code,
      })
    )
      .then((res) => {
        message.success("登陆成功");
        sessionStorage.setItem("initState", JSON.stringify(res.data));
        sessionStorage.setItem("token", JSON.stringify(res.data.token));
        props.history.push("/home/System/SystemPage");
      })
      .catch((err) => {
        changecode();
        form.resetFields(); // 重置
      });

    // 假的
    // sessionStorage.setItem("initState", JSON.stringify(moke));
    // sessionStorage.setItem("token", JSON.stringify(moke.token));
    // props.history.push("/home/System/SystemPage");
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  // 初始化获取当前屏幕可用高度
  useEffect(() => {
    const h = window.innerHeight;
      setAvaHeight(h);
    window.onresize = function () {
      const h = window.innerHeight;
      setAvaHeight(h);
    }
  }, []);

  return (
    <div
      className="bg"
      style={{
        width: "auto",
        height: avaHeight,
      }}
    >
      <div className="henfu" style={{ top: avaHeight / 2 - 190 }}>
        <div className="text-box">
          <div className="ele"></div>
          <div className="txt">
            <h1 className="txt-big">大象金融科技核心管理系统</h1>
            <h3 className="txt-small">
              Financial Technology Management System
            </h3>
          </div>
        </div>
        <Form
          form={form}
          id="login-form"
          name="normal_login"
          className="login-form"
          initialValues={{
            username: "admin",
            password: "123456",
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: "请输入账号!",
              },
            ]}
          >
            <Input
              size="large"
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入账号"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              size="large"
              placeholder="请输入密码"
            />
          </Form.Item>

          <Form.Item className="input-forget">
            <Form.Item
              name="yzcode"
              rules={[
                {
                  required: true,
                  message: "请输入验证码",
                },
              ]}
            >
              <Input
                placeholder="请输入验证码"
                size="large"
                style={{marginRight:'15px'}}
                bordered
              />
            </Form.Item>
            <Image
              onClick={changecode}
              width={120}
              height={39}
              src={captchadata}
              preview={false}
              fallback=""
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
